<!DOCTYPE html>
<html>
<head>
    <title>太阳系 - 月球贴图版</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
 #controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
            background: rgba(0,0,0,0.7);
            padding: 10px;
            border-radius: 5px;
        }
        button {
            display: block;
            margin: 5px 0;
            padding: 8px 12px;
            background: #444;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover { background: #666; }
        button.active { background: #2196F3; }
        #speedDisplay {
            color: white;
            text-align: center;
            margin: 10px 0;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="controls">
        <button id="btnMoon">跟踪月球</button>
        <button id="btnSun">跟踪太阳</button>
        <button id="btnFixed">跟踪地球</button>


        <!-- 新增速度控制 -->
        <div id="speedDisplay">速度: 100%</div>
        <button id="btnFaster">加速 ▶▶</button>
        <button id="btnSlower">减速 ◀◀</button>
    </div>





    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

    <script>
        // 初始化场景
         let speedFactor = 1.0; // 初始速度系数

	 let currentTarget = 'moon'; // 当前跟踪目标
        const fixedPosition = new THREE.Vector3(0, 100, 0); // 固定视角坐标
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 纹理加载器
        const textureLoader = new THREE.TextureLoader();
        
        // 加载纹理
        const moonTexture = textureLoader.load('https://threejs.org/examples/textures/planets/moon_1024.jpg');
        const earthTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
        const earthNormalMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
        const earthSpecularMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');

 document.getElementById('btnFaster').addEventListener('click', () => {
            speedFactor = Math.min(5.0, speedFactor + 0.5); // 最大5倍速
            updateSpeedDisplay();
        });

        document.getElementById('btnSlower').addEventListener('click', () => {
            speedFactor = Math.max(0.1, speedFactor - 0.5); // 最低0.1倍速
            updateSpeedDisplay();
        });

        function updateSpeedDisplay() {
            const display = document.getElementById('speedDisplay');
            display.textContent = `速度: ${Math.round(speedFactor * 100)}%`;
        }











 document.getElementById('btnMoon').addEventListener('click', () => {
            currentTarget = 'moon';
            updateButtonState('btnMoon');
        });
        
        document.getElementById('btnSun').addEventListener('click', () => {
            currentTarget = 'sun';
            updateButtonState('btnSun');
        });
        
        document.getElementById('btnFixed').addEventListener('click', () => {
            currentTarget = 'fixed';
            updateButtonState('btnFixed');
        });

        function updateButtonState(activeId) {
            document.querySelectorAll('button').forEach(btn => {
                btn.classList.remove('active');
            });
            document.getElementById(activeId).classList.add('active');
        }






        // 创建白色太阳
        function createWhiteSun() {
            // 太阳本体
            const sunGeometry = new THREE.SphereGeometry(4, 32, 32);
            const sunMaterial = new THREE.MeshPhongMaterial({
                emissive: 0xFF6347,
                emissiveIntensity: 1.5,
                color:0xFF4500  // 红色
            });
            const sun = new THREE.Mesh(sunGeometry, sunMaterial);

            // 白色点光源
            const sunLight = new THREE.PointLight(0xFFFFFF, 2.5, 200);
            sun.add(sunLight);

            // 光晕效果
            const glowMaterial = new THREE.SpriteMaterial({
                map: createGlowTexture(64, 0xFF6347),
                transparent: true,
                blending: THREE.AdditiveBlending,
                opacity: 0.7
            });
            const glow = new THREE.Sprite(glowMaterial);
            glow.scale.set(25, 25, 1);
            sun.add(glow);

            return sun;
        }

        // 创建光晕纹理
        function createGlowTexture(size, color) {
            const canvas = document.createElement('canvas');
            canvas.width = canvas.height = size;
            const ctx = canvas.getContext('2d');
            
            const gradient = ctx.createRadialGradient(
                size/2, size/2, 0, 
                size/2, size/2, size/2
            );
            gradient.addColorStop(0, `rgba(255,50,50,1)`);
            gradient.addColorStop(0.2, `rgba(255,100,100,0.8)`);
            gradient.addColorStop(0.5, `rgba(255,10,10,0.3)`);
            gradient.addColorStop(1, `rgba(255,20,20,0)`);
            
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, size, size);
            
            return new THREE.CanvasTexture(canvas);
        }

        // 创建地球
        function createEarth() {
            const earthMaterial = new THREE.MeshPhongMaterial({
                map: earthTexture,
                normalMap: earthNormalMap,
                specularMap: earthSpecularMap,
                specular: 0x222222,
                shininess: 25
            });
            return new THREE.Mesh(
                new THREE.SphereGeometry(2, 32, 32),
                earthMaterial
            );
        }

        // 创建带贴图的月球
        function createTexturedMoon() {
            const moonMaterial = new THREE.MeshPhongMaterial({
                map: moonTexture,
                bumpScale: 0.05,
                specular: 0x111111,
                shininess: 10
            });
            return new THREE.Mesh(
                new THREE.SphereGeometry(0.8, 32, 32),
                moonMaterial
            );
        }

        // 初始化天体系统
        const sun = createWhiteSun();
        const earth = createEarth();
        const moon = createTexturedMoon();

        // 设置初始位置
        earth.position.x = 30;
        moon.position.x = 34;
        sun.add(earth);
       sun.add(moon);
        scene.add(sun);
	
        // 相机控制
	function setEarthView() {
            // 将摄像机放置在地球后方
	   // earth.add(camera);
            camera.position.x = 0;  // 后退距离
            camera.position.y = 40;  // 俯视高度
            camera.position.z = 0;  // 侧向偏移
              const targetPosition = new THREE.Vector3();
            moon.getWorldPosition(targetPosition);
            
            // 设置相机朝向
            camera.lookAt(targetPosition);

            
            // 更新轨道控制器目标
            controls.target.copy(targetPosition);
            controls.update();
        }

        // 相机控制
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        setEarthView(); // 初始视角设置




        // 动画循环
        function animate() {















            requestAnimationFrame(animate);
	    const We=1/365;
	    const Wm=1/28;
            const time = Date.now() * 0.001*speedFactor;
            
            // 地球公转
            earth.position.x = Math.cos(-1*We*time) * 30;
           earth.position.z = Math.sin(-1*We*time) * 30;
           earth.rotation.y = 6.28*time;

            // 月球公转
           moon.position.x = Math.cos(-1*Wm*time) * 4+earth.position.x;
          moon.position.z = Math.sin(-1*Wm*time) * 4+earth.position.z;
          moon.rotation.y = Wm*time+0.785;

	    controls.target.copy(earth.getWorldPosition(new THREE.Vector3()));
            controls.update();
            renderer.render(scene, camera);

          const targetPosition = new THREE.Vector3();
            switch(currentTarget) {
                case 'moon':
                    moon.getWorldPosition(targetPosition);
controls.target.copy(moon.getWorldPosition(new THREE.Vector3()));
            controls.update();
            renderer.render(scene, camera);
                    break;
                case 'sun':
                    sun.getWorldPosition(targetPosition);
controls.target.copy(sun.getWorldPosition(new THREE.Vector3()));
            controls.update();
            renderer.render(scene, camera);
                    break;
                case 'fixed':
                    targetPosition.copy(fixedPosition);
controls.target.copy(earth.getWorldPosition(new THREE.Vector3()));
            controls.update();
            renderer.render(scene, camera);
                    break;
            }

camera.lookAt(targetPosition);




        }

        // 窗口调整
        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        animate();
    </script>
</body>
</html>